<template>
  <div class="w-full flex absolute bottom-0">
    <footer
      class="bg-zinc-700 rounded-tl-xl rounded-tr-xl shadow-up-sm mx-12 flex-grow select-none"
    >
      <!-- 组件一：色板 -->
      <div class="flex justify-between text-white items-center">
        <Icon
          class="m-3 p-1 rounded-lg hover:bg-gray-600"
          :class="[!store.usingTool.blend && 'text-gray-500']"
          @pointerdown="store.changeBlend"
        >brush</Icon>
        <ColorDisc></ColorDisc>
        <Icon class="m-3 p-1 rounded-lg hover:bg-gray-600" @click="UserInput.save">save</Icon>
      </div>

      <!-- 组件二：绘画工具+背景纸 -->
      <div
        class="flex flex-row justify-start bg-zinc-700 shadow-up w-full h-28 pt-4 pl-4 gap-4 transition-transform"
      >
        <div
          v-for="(item, index) in store.tools"
          class="bg-white w-8"
          :class="[index !== store.selected.Tool && 'translate-y-5']"
          @click="store.changeTool(index)"
        >{{ item.name }}</div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.shadow-up {
  box-shadow: 0 -25px 50px -12px rgba(0, 0, 0, 0.2);
}
.shadow-up-sm {
  box-shadow: 0 -25px 50px -12px rgba(0, 0, 0, 0.1);
}
</style>

<script lang="ts" setup>
import Icon from "@konghayao/vue-material-icons";
import { useToolStore } from "../ToolBox/Tool";
import ColorDisc from "./ColorDisc.vue";
import { UserHub, UserInput } from "../UserInput/UserListener";
const store = useToolStore()



</script>